<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body{background:black;margin:0;}
  </style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="100vw" height="100vh">
  <defs>
    <!-- TODO
      patternUnits="" 指定的pattern本身的属性
      patternContentUnits="" 指定的pattern里面的每个元素的单位的意义

      默认:
        + patternUnits="objectBoundingBox"
        + patternContentUnits="userSpaceOnUse"
    -->
    <pattern id="p1" x="0" y="0" width="0.2" height="0.2" >
      <circle cx="10" cy="10" r="5" fill="red"></circle>
      <polygon points="30 10 60 50 0 50" fill="green"></polygon>
    </pattern>

    <!--<pattern id="p1" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="5" fill="red"></circle>
      <polygon points="30 10 60 50 0 50" fill="green"></polygon>
    </pattern>-->

    <!--<pattern id="p1" x="0" y="0" width="0.25" height="0.25" patternUnits="objectBoundingBox" patternContentUnits="objectBoundingBox">
      <circle cx="0.1" cy="0.1" r="0.1" fill="red"></circle>
    </pattern>-->
  </defs>
  <rect x="100" y="100"  width="800" height="300" fill="url(#p1)" stroke="blue"></rect>
</svg>
</body>
</html>
